<template>
    <div>
        <v-top>
            <h3>手机注册</h3>
        </v-top>
        <article class="login flexC">
            <h1 class="logo">
                <img src="../assets/img/orange.png" alt="LOGO">
            </h1>
            <div class="tel">
                <input type="tel" v-model="userinfo.phone" placeholder="手机号" class="font24">
            </div>
            <div>
                <input type="text" v-model="userinfo.nickname" placeholder="昵称" class="font24">
            </div>
            <div class="yzm flex">
                <input type="text" v-model="userinfo.password"  placeholder="密码" class="font24">
                <!-- <input type="button" value="获取验证码" class="font20"> -->
            </div>
            <input type="submit" value="注		册" class="font32" @click="register">
        </article>
        <v-footer></v-footer>
    </div>
</template>

<script>
import vFooter from '../components/vFooter.vue';
//引入注册接口
import {register} from '../utils/api'
//引入路由
import router from '../router'
export default {
    data(){
        return{
            userinfo:{
                phone:'',
                nickname:'',
                password:'',
            }
        }
    },
    components:{
        vFooter,
    },
    methods:{
        register(){
            if(this.userinfo.phone == '' || this.userinfo.nickname == '' || this.userinfo.password == ''){
                alert('输入不能为空');
                return;
            }
            register(this.userinfo).then(res=>{
                if(res.code == 200){
                    alert('注册成功')
                    router.push('/login')
                }else{
                    alert(res.msg);
                    return;
                }
            }).catch(err=>{
                console.log(err);
            })
        }
    }
};
</script>

<style scoped>
@import '../assets/css/telLogin.css'
</style>
